<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>多语言测试页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #eee;
        }
        .section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h3 {
            margin-top: 0;
            color: #333;
        }
        .lang-switcher {
            text-align: center;
            margin-bottom: 20px;
        }
        .lang-btn {
            padding: 8px 16px;
            margin: 0 5px;
            border: 1px solid #007bff;
            background: white;
            color: #007bff;
            cursor: pointer;
            border-radius: 4px;
            text-decoration: none;
            display: inline-block;
        }
        .lang-btn:hover {
            background: #007bff;
            color: white;
        }
        .lang-btn.active {
            background: #007bff;
            color: white;
        }
        .demo-buttons {
            margin: 10px 0;
        }
        .demo-buttons button {
            padding: 8px 16px;
            margin: 5px;
            border: 1px solid #007bff;
            background: #007bff;
            color: white;
            cursor: pointer;
            border-radius: 4px;
        }
        .demo-buttons button:hover {
            background: #0056b3;
        }
        .info-box {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .test-result {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 data-i18n="system.title">xxpay 聚合支付运营平台</h1>
            <p data-i18n="system.welcome">欢迎使用运营平台</p>
        </div>

        <!-- 语言切换器 -->
        <div class="section">
            <h3>语言切换 / Language Switch</h3>
            <div class="lang-switcher">
                <a href="javascript:;" class="lang-btn" data-lang="zh_CN">中文</a>
                <a href="javascript:;" class="lang-btn" data-lang="en_US">English</a>
            </div>
            <div class="info-box">
                <strong>当前语言 / Current Language:</strong> <span id="current-lang">zh_CN</span><br>
                <strong>浏览器语言 / Browser Language:</strong> <span id="browser-lang">-</span>
            </div>
        </div>

        <!-- 基本文本测试 -->
        <div class="section">
            <h3 data-i18n="test.basic.text">基本文本测试</h3>
            <p><strong data-i18n="operation.success">操作成功</strong></p>
            <p><strong data-i18n="operation.failed">操作失败</strong></p>
            <p><strong data-i18n="data.not.exists">数据不存在</strong></p>
            <p><strong data-i18n="user.permission.denied">权限不足</strong></p>
        </div>

        <!-- 按钮测试 -->
        <div class="section">
            <h3 data-i18n="test.buttons">按钮测试</h3>
            <div class="demo-buttons">
                <button data-i18n="button.save">保存</button>
                <button data-i18n="button.cancel">取消</button>
                <button data-i18n="button.delete">删除</button>
                <button data-i18n="button.search">搜索</button>
                <button data-i18n="button.export">导出</button>
            </div>
        </div>

        <!-- 状态测试 -->
        <div class="section">
            <h3 data-i18n="test.status">状态测试</h3>
            <p><span data-i18n="status.enabled">已启用</span> | <span data-i18n="status.disabled">已禁用</span></p>
            <p><span data-i18n="status.pending">待处理</span> | <span data-i18n="status.processing">处理中</span></p>
            <p><span data-i18n="status.success">成功</span> | <span data-i18n="status.failed">失败</span></p>
        </div>

        <!-- API测试 -->
        <div class="section">
            <h3>API测试</h3>
            <div class="demo-buttons">
                <button onclick="testCurrentLanguage()">获取当前语言</button>
                <button onclick="testSupportedLanguages()">获取支持语言</button>
                <button onclick="testGetMessage()">获取消息</button>
            </div>
            <div id="api-result" class="test-result" style="display: none;"></div>
        </div>

        <!-- JavaScript测试 -->
        <div class="section">
            <h3>JavaScript测试</h3>
            <div class="demo-buttons">
                <button onclick="testJavaScriptI18n()">测试JS国际化</button>
                <button onclick="showAlert()">显示提示</button>
            </div>
            <div id="js-result" class="test-result" style="display: none;"></div>
        </div>
    </div>

    <!-- 简化的国际化脚本 -->
    <script>
        // 简化的国际化实现
        var SimpleI18n = {
            locale: 'zh_CN',
            messages: {
                'zh_CN': {
                    'system.title': 'xxpay 聚合支付运营平台',
                    'system.welcome': '欢迎使用运营平台',
                    'test.basic.text': '基本文本测试',
                    'test.buttons': '按钮测试',
                    'test.status': '状态测试',
                    'operation.success': '操作成功',
                    'operation.failed': '操作失败',
                    'data.not.exists': '数据不存在',
                    'user.permission.denied': '权限不足',
                    'button.save': '保存',
                    'button.cancel': '取消',
                    'button.delete': '删除',
                    'button.search': '搜索',
                    'button.export': '导出',
                    'status.enabled': '已启用',
                    'status.disabled': '已禁用',
                    'status.pending': '待处理',
                    'status.processing': '处理中',
                    'status.success': '成功',
                    'status.failed': '失败'
                },
                'en_US': {
                    'system.title': 'xxpay Payment Management Platform',
                    'system.welcome': 'Welcome to Management Platform',
                    'test.basic.text': 'Basic Text Test',
                    'test.buttons': 'Button Test',
                    'test.status': 'Status Test',
                    'operation.success': 'Operation Successful',
                    'operation.failed': 'Operation Failed',
                    'data.not.exists': 'Data Not Found',
                    'user.permission.denied': 'Permission Denied',
                    'button.save': 'Save',
                    'button.cancel': 'Cancel',
                    'button.delete': 'Delete',
                    'button.search': 'Search',
                    'button.export': 'Export',
                    'status.enabled': 'Enabled',
                    'status.disabled': 'Disabled',
                    'status.pending': 'Pending',
                    'status.processing': 'Processing',
                    'status.success': 'Success',
                    'status.failed': 'Failed'
                }
            },

            t: function(key) {
                return this.messages[this.locale][key] || key;
            },

            setLocale: function(locale) {
                this.locale = locale;
                this.updatePage();
                this.updateCurrentLang();
            },

            updatePage: function() {
                var elements = document.querySelectorAll('[data-i18n]');
                for (var i = 0; i < elements.length; i++) {
                    var element = elements[i];
                    var key = element.getAttribute('data-i18n');
                    element.textContent = this.t(key);
                }
            },

            updateCurrentLang: function() {
                document.getElementById('current-lang').textContent = this.locale;
                
                // 更新按钮状态
                var buttons = document.querySelectorAll('.lang-btn');
                for (var i = 0; i < buttons.length; i++) {
                    var btn = buttons[i];
                    if (btn.getAttribute('data-lang') === this.locale) {
                        btn.classList.add('active');
                    } else {
                        btn.classList.remove('active');
                    }
                }
            }
        };

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 显示浏览器语言
            document.getElementById('browser-lang').textContent = navigator.language || navigator.userLanguage;
            
            // 绑定语言切换事件
            var langButtons = document.querySelectorAll('.lang-btn');
            for (var i = 0; i < langButtons.length; i++) {
                langButtons[i].addEventListener('click', function(e) {
                    e.preventDefault();
                    var lang = this.getAttribute('data-lang');
                    SimpleI18n.setLocale(lang);
                    
                    // 调用后端API切换语言
                    switchLanguageAPI(lang);
                });
            }
            
            // 初始化页面
            SimpleI18n.updateCurrentLang();
        });

        // API测试函数
        function switchLanguageAPI(lang) {
            fetch('/api/i18n/switch', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'lang=' + encodeURIComponent(lang)
            })
            .then(response => response.json())
            .then(data => {
                console.log('Language switch result:', data);
            })
            .catch(error => {
                console.error('Language switch error:', error);
            });
        }

        function testCurrentLanguage() {
            fetch('/api/i18n/current')
            .then(response => response.json())
            .then(data => {
                showResult('api-result', 'Current Language API Result: ' + JSON.stringify(data, null, 2));
            })
            .catch(error => {
                showResult('api-result', 'Error: ' + error.message);
            });
        }

        function testSupportedLanguages() {
            fetch('/api/i18n/languages')
            .then(response => response.json())
            .then(data => {
                showResult('api-result', 'Supported Languages API Result: ' + JSON.stringify(data, null, 2));
            })
            .catch(error => {
                showResult('api-result', 'Error: ' + error.message);
            });
        }

        function testGetMessage() {
            fetch('/api/i18n/message?key=operation.success')
            .then(response => response.json())
            .then(data => {
                showResult('api-result', 'Get Message API Result: ' + JSON.stringify(data, null, 2));
            })
            .catch(error => {
                showResult('api-result', 'Error: ' + error.message);
            });
        }

        function testJavaScriptI18n() {
            var result = 'JavaScript I18n Test:\n';
            result += 'Current Locale: ' + SimpleI18n.locale + '\n';
            result += 'operation.success: ' + SimpleI18n.t('operation.success') + '\n';
            result += 'button.save: ' + SimpleI18n.t('button.save') + '\n';
            result += 'status.enabled: ' + SimpleI18n.t('status.enabled');
            
            showResult('js-result', result);
        }

        function showAlert() {
            alert(SimpleI18n.t('operation.success'));
        }

        function showResult(elementId, text) {
            var element = document.getElementById(elementId);
            element.style.display = 'block';
            element.innerHTML = '<pre>' + text + '</pre>';
        }
    </script>
</body>
</html>
